<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心_趣玩</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="icon" type="images/x-ico" href="images/favicon.ico">
    <link rel="stylesheet" href="css/resest.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <div class="login">
        <div class="login-top">
            <img src="images/logo.gif" alt="">
            <div class="login-btn"><b>如未注册，点此 </b>
                <a href="login.html">登录</a>
            </div>
        </div>

        <div class="login-center">
            <div class="center-table">
                <p class="p1">新用户注册</p>
                <hr>
                <form>
                    <ul>
                        <li class="input-box"><input type="text" placeholder="用户名">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="input-box"><input type="text" placeholder="email">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="input-box"><input type="password" placeholder="密码">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="input-box"><input type="password" placeholder="确认密码">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="law"><input type="checkbox" name="" id="" checked>
                            <span>我已看过并接受
                                《<a href="https://www.quwan.com/article.php?cat_id=-1" target="_blank">用户协议</a>》</span>
                        </li>
                        <li class="error-box"></li>
                        <li class="btn"><input type="button" value="同意协议并注册"></li>
                    </ul>
                    <div class="box-end">
                        <p class="p2">使用第三方账号登录</p>
                        <div class="box-other">
                            <span class="iconfont icon-qq" style="background-color: #28a8e4;"></span>
                            <span class="iconfont icon-weibo" style="background-color: #fb5056;"></span>
                            <span class="iconfont icon-zhifubaozhifu" style="background-color: #f3a426;"></span>
                            <span class="iconfont icon-weixin" style="background-color: #00c100;"></span>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    // 验证账号是否输入正确
    $(".input-box").eq(0).children("input").on("blur", function () {
        let reg = /^.{5,13}$/;
        let name = $(".input-box").eq(0).children("input").val();
        if (reg.test(name)) {
            $.post('goodsAndShoppingCart/checkUser.php', {
                'username': name
            }, function (data) {
                if ("data==0") {
                    $(".error-box").eq(0).text("可以注册").css({
                        color: "green"
                    })
                    $(".input-box").eq(0).children("span").eq(1).show().prev().hide()
                } else {
                    $(".error-box").eq(0).text("用户名已存在").css({
                        color: "red"
                    })
                    $(".input-box").eq(0).children("span").eq(0).show().next().hide();
                }
            })
        } else {
            $(".error-box").eq(0).text("请输入正确的用户名").eq(0).css({
                color: "red"
            })
            $(".input-box").eq(0).children("span").eq(0).show().next().hide();
        }
    })
    //验证密码
    $(".input-box").eq(2).children("input").on("blur", function () {
        let password = $(".input-box").eq(2).children("input").val();
        let reg = /^.{6,16}$/
        if (reg.test(password)) {

            $(this).next().hide().next().show()
        } else {
            $(".error-box").eq(2).text("登录密码不能少于 6 个字符。").css({
                color: "red"
            })
            $(this).next().show().next().hide()
        }
    })
    //确认密码
    $(".input-box").eq(3).children("input").on("blur", function () {
        let password = $(".input-box").eq(2).children("input").val();
        let password1 = $(".input-box").eq(3).children("input").val();
        if (password == password1) {
            $(this).next().hide().next().show();
            $(".error-box").eq(3).text("输入正确").css({
                color: "green"
            })

        } else {
            $(this).next().show().next().hide();
            $(".error-box").eq(3).text("两次密码不一致，请重新输入").css({
                color: "red"
            })
        }
    })
    //添加用户
    $(".btn").on("click", function () {
        let a = $(".error-box").eq(0).text() == "可以注册";
        let b = $(".error-box").eq(3).text() == "输入正确";
        let c = $(".law").children("input").prop("checked");
        let name = $(".input-box").eq(0).children("input").val();
        let pass = $(".input-box").eq(3).children("input").val();
        if (a && b && c) {
            $.post('goodsAndShoppingCart/addUser.php',
                {
                    username: name,
                    userpass: pass,
                }, function (data) {
                    console.log(data);
                    if (data.trim()=="success") {
                        alert("注册成功，点击确定进入主页或两秒后自动跳转");
                      setTimeout(function(){
                        location.href='index.html';
                      },2000)
                    } else {
                        alert("请重新注册");
                    }
                }
            )
        }else{
            alert("请确认账户密码是否正确或是否有选择接受用户协议");
        }
    })
</script>